<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html >
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH }content/scripts/bootstrap/css/bootstrap.min.css">
	<title>员工作品上传</title>
	<script src="${ROOT_PATH }content/scripts/jquery-1.10.1.min.js"></script>
	<script src="${ROOT_PATH }content/scripts/jquery.form.js"></script>
	<script src="${ROOT_PATH }content/scripts/juery.hammer.js"></script>
	<script src="${ROOT_PATH }content/scripts/bootstrap/js/bootstrap.min.js"></script>
	<style type="text/css">
		*{}
		body{
			background:url(${ROOT_PATH }content/images/front/amani1_02.png) no-repeat;background-size: 100% 100%;
			color:#fff;
			background-color: #201B1D;
		}
	</style>
</head>
<body>
	<section>
		<form action="${ROOT_PATH }Staff/work/upload" enctype="multipart/form-data" name="stafform" id="stafform" method="post">
			<div style="width:100%;position: relative;">
				<br>
				<div id="clk" style="width:100%;height:300px;position: absolute;z-index:100;text-align: center;line-height: 300px;">点击添加图片</div>
				<img id="zp" src="${work.imageurl.value }" style="width:80%;height:300px;top:0px;left:0px; z-index:99;margin: auto;margin-left: 10%">
			
				<div>
					作品描述（至少50字）
					<textarea id="ms" name="ms" rows="5" cols="25" style="width:90%;margin-left:5%;color: black;">${work.content.value}</textarea>
				</div>
			</div>
			<div>
				<div>
					<p>标签</p>
					<div>
						<input type="checkbox" name="bq" value="长发"/>长发
						<input type="checkbox" name="bq" value="短发"/>短发
						<input type="checkbox" name="bq" value="可爱"/>可爱
						<input type="checkbox" name="bq" value="中等"/>中等
						<input type="checkbox" name="bq" value="冷烫"/>冷烫
					</div>
				</div>
				<div>
					适合脸型
					<div>
						<input type="checkbox" name="lx" value="圆脸"/>圆脸
						<input type="checkbox" name="lx" value="方脸"/>方脸
						<input type="checkbox" name="lx" value="长脸"/>长脸
						<input type="checkbox" name="lx" value="瓜子脸"/>瓜子脸
					</div>
				</div>
				<input id="image" name="image" type="file" accept="image/jpeg,image/x-png" style="display:none;"/>
			</div>
			<div style="width: 100%;text-align: center;margin: 10px 0;">
				<input name="id" type="hidden" value="${work.id.value }">
				<input id="qr" name="sub" type="submit" value="确认上传" style="color:#000;width: 120px;height: 30px;">
			</div>
		</form>
	</section>
	<script type="text/javascript">
	var lx = "${work.name}";
	var bq = "${work.label2}";
	
    function preview(id, file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $("#"+ id).attr("src", e.target.result);
        }
        reader.readAsDataURL(file);
        return file;
    }
	$(function () {
		$("#clk").click(function(){
			$(this).html("");
			$("#image").click();
		});
		 $("#image").change(function(e) {
             var file = e.target.files[0];
             preview("zp", file);
         });
        $('#stafform').submit(function () {
        	var options = {
				beforeSubmit: function () {
                    //验证
                    if($.trim($("#ms").val()).length<50){
                    	alert("描述信息要大于50字")
                    	return false;
                    }
                },
                dataType: 'json',
                success: function (txt) {
                    if (txt.isok) {
                        alert("保存成功");
                        location.href="${ROOT_PATH}/Staff/works"
                        return false;
                    } else {
                    	alert(txt.data);
                        return false;
                    }
                }
            };
            $('#stafform').ajaxSubmit(options);
            return false;
        });
        lxbq();
	});
	function lxbq(){
		lxs = lx.split(",");
		bqs = bq.split(",");
		for(i=0;i<lxs.length;i++){
			$("input:checkbox[value='"+lxs[i]+"']").attr('checked','true');
		}
		for(i=0;i<bqs.length;i++){
			$("input:checkbox[value='"+bqs[i]+"']").attr('checked','true');
		}
	}
	</script>
</body>
</html>